<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .main {
        	background-color: #fff;
        }
        .main ul li {
        	padding: 0 15px;
        }
        .li_box {
        	height: 50px;
        	line-height: 50px;
			border-bottom: 1px solid #e8e8e8;
        }
        .main ul li:last-child .li_box {
        	border-bottom: none;
        }
        .main ul li .li_box2 {
        	display: -webkit-box;
        	display: -webkit-flex;
        	align-items: center;
        }
        .main ul li .li_box2 .li_box2l {
        	height: 100%;
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        }
        .main ul li .li_box2 .li_box2r {
        	height: 100%;
        	display: -webkit-box;
        	-webkit-box-align: center;
        }
        .main ul li .li_box2 .li_box2r .get_code {
        	width: 77px;
        	height: 28px;
        	line-height: 28px;
        	text-align: center;
        	font-size: 13px;
			color: #fff;
			background-color: #e62442;
			border-radius: 50px;
        }
        .main ul li .li_box2 .li_box2r .show_icon {
        	width: 16px;
        	display: block;
        	padding-left: 15px;
        }
        .main ul li .li_box input {
        	width: 100%;
        	height: 100%;
        	color: #999;
        	font-size: 14px;
        	background-repeat: no-repeat;
        	background-size: 15px auto;
        	background-position: left center;
        	padding-left: 35px;
        	box-sizing: border-box;
        	display: block;
        }
        .main ul li .li_box input::-webkit-input-placeholder {
        	color: #999;
        }
        .main ul li:nth-child(1) input {
        	background-image: url('../image/login_icon1.png');
        }
        .main ul li:nth-child(2) input {
        	background-image: url('../image/login_icon3.png');
        }
        .main ul li:nth-child(3) input {
        	background-image: url('../image/login_icon2.png');
        }
        .btn_box {
        	margin-top: 25px;
        	padding: 0 15px;
        }
        .btn_box .btn {
        	height: 40px;
        	line-height: 40px;
        	background-color: #e62442;
        	color: #fff;
        	text-align: center;
        	border-radius: 5px;
        	font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="main">
    	<ul>
    		<li>
    			<div class="li_box">
    				<input class="phone" type="text" placeholder="请输入手机号">
    			</div>
    		</li>
    		<li>
    			<div class="li_box li_box2">
    				<div class="li_box2l">
	    				<input class="code" type="text" placeholder="请输入验证码">
    				</div>
    				<div class="li_box2r">
    					<div class="get_code code_num" onclick="fnGetCode();" tapmode>获取验证码</div>
    				</div>
    			</div>
    		</li>
    		<li>
    			<div class="li_box li_box2">
    				<div class="li_box2l">
	    				<input class="new_password" type="password" placeholder="请设置新密码">
    				</div>
    				<div class="li_box2r" tapmode onclick="fnShowPassword();">
    					<!-- <img class="show_icon" src="../image/show.png"> -->
                        <img class="show_icon" src="../image/closeeye.png">
    				</div>
    			</div>
    		</li>
    	</ul>
    </div>
    <div class="btn_box">
    	<div class="btn" onclick="fnSubmit();">确定</div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        
    };
    var codeMark = false;

    // 显示密码
    function fnShowPassword() {
        if ($('.new_password').attr('type') == 'password') {
            $('.new_password').attr('type', 'text');
            $(".show_icon").attr('src','../image/show.png');
        } else {
            $('.new_password').attr('type', 'password');
            $(".show_icon").attr('src','../image/closeeye.png');
        }
    }

    function fnGetCode() {
        $("input").blur();
        if(codeMark) {
            return;
        }
        var phone = $('.phone').val();
        if (isMalaysiaMobile($('.phone').val()) == 0) {
            api.toast({
                msg: '手机号格式错误',
                location : "middle"
            });
            return;
        }
        codeMark = true;
        var num = 60;
        $('.code_num').text(num);
        $('.code_num').addClass('code_time');
        var timer = setInterval(function() {
            --num;
            $('.code_num').text(num);
            if (num <= 0) {
                clearInterval(timer);
                codeMark = false;
                $('.code_num').text('重新发送');
                $('.code_num').removeClass('code_time');
            }
        }, 1000);
        //开始发验证码
        //后台生成code
        api.ajax({
            url: rootPath + '/api/login/get_code',
            method: 'post',
            data: {
                values: { 
                    phone: phone,
                    type : 'change_password'
                },
            }
        },function(ret,err){
            if(ret) {
                if(ret.status == 200) {
                   api.toast({
                       msg: '发送成功',
                       location : 'middle'
                   });
                    
                }else {
                    api.toast({
                        msg: '发送失败',
                        location: 'middle'
                    });
                }
            }else {
                
            }
        })
    }

    function fnSubmit() {
        $("input").blur();
        var phone = $('.phone').val();
        var code = $('.code').val();
        var new_password = $('.new_password').val();
        if( '' == $('.phone').val()) {
             api.toast({
                msg: '请输入手机号码',
                location:'middle'
            });
            return;
        }
        if (isMalaysiaMobile($('.phone').val()) == 0) {
            api.toast({
                msg: '手机号格式错误',
                location:'middle'
            });
            return;
        }

        if (!$('.code').val()) {
            api.toast({
                msg: '请输入验证码',
                location: 'middle'
            });
            return;
        }
        if (!$('.new_password').val()) {
            api.toast({
                msg: '请输入新密码',
                location: 'middle'
            });
            return;
        }
        if(new_password.length < 6 || new_password.length > 18) {
            api.toast({
                msg: '新密码必须在6~18位之间',
                location : 'middle'
            });
            return;
        }
        api.ajax({
            url: rootPath+'/api/login/change_password',
            method: 'post',
            data: {
                values: { 
                    phone: phone,
                    code:code,
                    password : new_password,
                },
            }
        }, function(ret, err) {
            if (ret && ret.status == 200) {
                api.toast({
                    msg: '修改成功',
                    location : 'middle'
                });
                setTimeout(function(){
                    api.closeWin();
                },1000)
            } else {
                var _msg = ret.msg?ret.msg:'修改失败';
                api.toast({
                    msg: _msg,
                    location : 'middle'
                });
            }
        });
    }
</script>
</html>